import type { DeckInfoCardItem } from '/@/api/currentDeck/model/deckModel';
import { computed, defineComponent, unref } from 'vue';
import { useVModels } from '@vueuse/core';
import setting from '/@/settings/projectSetting';
import { Button, ConfigProvider, Popup, Empty } from 'vant';

import('./ChooseCardPopup.less');

export default defineComponent({
  name: 'ChooseCardPopup',
  props: {
    show: {
      type: Boolean as PropType<boolean>,
      required: true,
      default: () => {
        return false;
      },
    },
    deckCardList: {
      type: Array as PropType<DeckInfoCardItem[]>,
      required: true,
    },
  },
  emits: ['update:show', 'addCard', 'delCard'],
  setup(props, { emit }) {
    const { show } = useVModels(props, emit);

    const allCards = computed(() => {
      const { deckCardList } = props;
      const allArray: DeckInfoCardItem[] = [];
      for (const item of deckCardList) {
        allArray.push(item);
      }
      return allArray;
    });
    const cardSum = computed(() => {
      let num = 0;
      unref(allCards).map((item) => {
        num += item.number!;
      });
      return num;
    });

    const GetCardArea = () => {
      const selectCards = unref(allCards);

      const listArr: VueNode[] = [];

      const CardAction = ({ card }: { card: DeckInfoCardItem }) => {
        return (
          <ConfigProvider
            themeVars={{ buttonBorderWidth: 0 }}
            class={'card-action-buttons flex justify-between absolute bg-white'}
          >
            <Button
              plain
              icon={'minus'}
              size={'small'}
              type='primary'
              round
              disabled={!card.number}
              onClick={() => {
                emit('delCard', card);
              }}
            />
            <span class={`card-nums ${card.number ? '' : 'hidden'}`}>x{card.number}</span>
            <Button
              plain
              icon={'plus'}
              size={'small'}
              type='primary'
              round
              disabled={!!card.number}
              onClick={() => {
                emit('addCard', card);
              }}
            />
          </ConfigProvider>
        );
      };

      selectCards.map((item) => {
        listArr.push(
          <li class={'card-item relative'}>
            <div class='image'>
              <img src={item.img} alt='' onClick={() => {}} />
            </div>
            <div class={'name-box'}>
              <div class={'name-content van-ellipsis text-xs text-white px-md'}>{item.name}</div>
            </div>
            <CardAction card={item} />
          </li>
        );
      });

      if (!listArr.length) {
        return <Empty description={'未选择卡牌'}></Empty>;
      }
      return <ul class='choose-card-list flex flex-wrap'>{listArr}</ul>;
    };

    const TitleBox = () => {
      return (
        <div class={'card-nums-box flex items-center justify-between text-sm mb-30px'}>
          <span class={'font-bold'}>卡牌总数： {unref(cardSum)}</span>
        </div>
      );
    };

    return () => (
      <Popup
        class='current-choose-cards-popup'
        v-model={[show.value, 'show']}
        style={{ zIndex: setting.PageTitleZIndex - 1 }}
        overlayStyle={{ zIndex: setting.PageTitleZIndex - 1 }}
        position={'left'}
        teleport={'body'}
      >
        <TitleBox />
        <GetCardArea />
      </Popup>
    );
  },
});
